<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>注册</title>
    <!-- 引入 WeUI CDN 链接 -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.0/weui.min.css"/>
    <link rel="stylesheet" href="./css/base.css"/>
    <style>
        .weui-cells__group_form .weui-cell{
            padding: 11px 32px;
        }
        .weui-form__opr-area:last-child{
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="page">
    <div class="weui-form" style="padding: 10px;min-height: 90%">
        <div class="weui-form__text-area" >
            <img src="/img/logo.jpg" style="width: 100%;" alt="">
        </div>
        <div class="weui-form__control-area" style="margin: 0 0">
            <div class="weui-cells__group weui-cells__group_form">
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
                        <div class="weui-cell__bd">
                            <input autofocus class="weui-input" type="number"  placeholder="请输入手机号" id="i-mobile" value=""/>
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">密码</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="password"  placeholder="请输入密码" id="i-password" value=""/>
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">确认密码</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="password" placeholder="输入确认密码" id="i-repeat-password" value=""/>
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">微信昵称</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text"  placeholder="请输入微信昵称" id="i-nickname" value=""/>
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
                        <div class="weui-cell__bd">
                            <select class="weui-select" id="i-gender" style="height: 30px;line-height: 30px">
                                <option value="0">请选择</option>
                                <option value="1">女</option>
                                <option value="2">男</option>
                            </select>

                        </div>
                    </div>


                    <div class="weui-cell weui-cell_active weui-cell_vcode">
                        <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
                        <div class="weui-cell__bd">
                            <input  class="weui-input" type="text"  id="i-code" placeholder="输入验证码" maxlength="6"/>
                        </div>
                        <div class="weui-cell__ft">
                            <button class="weui-btn weui-btn_default weui-vcode-btn" id="b-getcode">获取验证码</button>
                        </div>
                    </div>
                </div>
                <div class="weui-cells__tips" style="margin-top: 20px">
                    <a class="weui-link" href="./login.html">已有账户，去登录</a>
                </div>
            </div>
        </div>

        <div class="weui-form__opr-area">
            <a class="weui-btn weui-btn_primary" href="javascript:" id="doRegister">确定</a>
        </div>
    </div>
    <div class="weui-toptips weui-toptips_warn" id="topTips"></div>
    <p style="text-align: center;color: #666">最终解释权归豪马公会所有</p>
    <a class="beian" href="http://www.beian.miit.gov.cn/" target="_blank">
        网站备案：赣ICP备19013735号
    </a>

</div>
<script src="./js/zepto.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<script type="text/javascript">
    $(function(){
        const linkId = getQueryString('link_id');
        if(linkId) {
            Cookies.set('link_id', linkId, { expires: 7, path: ''});
        }
        const setLinkId = Cookies.get('link_id');
        if(!setLinkId) {
            $("#doRegister").attr("disabled",true).css("background-color","#999");
            msg('请扫描推广二维码注册', 8000);
            return
        }
        $("#doRegister").click(function(){
            const mobile = $("#i-mobile").val();
            const password = $("#i-password").val();
            const repeatPassword = $("#i-repeat-password").val();
            const code = $("#i-code").val();
            const nickname = $("#i-nickname").val();
            const gender = $("#i-gender").val();
            if(!nickname) {
                msg('请填写微信昵称');
                return false
            }
            if(!gender) {
                msg('请选择性别');
                return false
            }
            if(!(/^1[3456789]\d{9}$/.test(mobile))){
                msg('手机格式不正确');
                return false
            }
            if(!(/^.{6,}$/.test(password))){
                msg('密码不能少于6位');
                return false
            }
            if (repeatPassword !== password) {
                msg('两次密码不一致');
                return false
            }
            const linkId = Cookies.get('link_id');
            $.post('/register', {mobile: mobile, password: password, repeat: repeatPassword,
                code: code, link_id: linkId, nickname: nickname, gender: gender}, function (res) {
                if (res.code !== 0) {
                    msg(res.msg);
                } else {
                    msg('注册成功');
                    setTimeout(function () {
                        window.location.href = '/login.html'
                    }, 1500)
                }
            })
        })


        let hadClick = false;
        $("#b-getcode").click(function(){
            const mobile = $("#i-mobile").val();
            if(!(/^1[3456789]\d{9}$/.test(mobile))){
                msg('手机格式不正确');
                return false
            }
            if(hadClick) {
                return false;
            }
            hadClick = true
            $("#b-getcode").attr("disabled",true);
            $.post('/send_code', {mobile: mobile}, function (res) {
                if (res.code !== 0) {
                    msg(res.msg);
                    $("#b-getcode").removeAttr("disabled");
                } else {
                    msg(res.data.msg);
                    incTime(60)
                }
                hadClick =false
            })
        })

        function incTime(time) {
            const getcode = $("#b-getcode")
            if(time <= 0) {
                getcode.removeAttr("disabled");
                getcode.text("获取验证码");
                return false;
            }
            getcode.text((time - 1) + "秒")
            setTimeout(function () {
                incTime(time - 1)
            }, 1000)
        }

        function getQueryString(name)
        {
            let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            let r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }

        function msg(msg, time = 1500) {
            const topTip = $('#topTips');
            topTip.text(msg);
            topTip.fadeIn(msg);
            setTimeout(function () {
                topTip.fadeOut()
            }, time)
        }
    });



</script>
</body>
</html>
